<template>
  <view class="product-selector">
    <!-- 搜索区域 -->
    <view class="search-area">
      <uni-search-bar
          :placeholder="placeholder"
          v-model="searchKey"
          @confirm="searchProducts"
          @input="onInput"
          class="custom-search-bar"
      ></uni-search-bar>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view class="empty-list" v-if="products.length === 0 && !loading">
        <text>{{ emptyText }}</text>
      </view>

      <view class="loading" v-if="loading">
        <uni-load-more status="loading"></uni-load-more>
      </view>

      <view
          class="product-item"
          v-for="product in products"
          :key="product.productId"
          @click="selectProduct(product)"
      >
        <view class="product-image">
          <image :src="product.defaultImageUrl || 'https://picsum.photos/200/200'" mode="aspectFill"></image>
        </view>
        <view class="product-info">
          <view class="product-name">{{ product.productName }}</view>
          <view class="product-meta">
            <text>{{ product.brandName || '无品牌' }}</text>
            <text v-if="product.categoryName"> | {{ product.categoryName }}</text>
          </view>
          <view class="product-meta">
            <text v-if="product.barcode">条码: {{ product.barcode }}</text>
          </view>
        </view>
        <view class="product-price" v-if="product.defaultPurchasePrice">
          <text>¥{{ product.defaultPurchasePrice.toFixed(2) }}</text>
        </view>
      </view>
    </view>

    <!-- 分页控制 -->
    <view class="pagination" v-if="products.length > 0 && !loading">
      <uni-load-more
          :content-text="loadMoreText"
          :status="loadMoreStatus"
          @clickloadmore="loadMore"
      ></uni-load-more>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductSelector',
  props: {
    selectedIds: {type: Array, default: () => []},
    placeholder: {type: String, default: '搜索商品'},
    emptyText: {type: String, default: '暂无商品数据'},
    pageSize: {type: Number, default: 10}
  },
  data() {
    return {
      searchKey: '',
      products: [],
      pageNum: 1,
      queryProduct:{
        pageSize:5
      },
      totalPages: 1,
      loading: false,
      loadMoreStatus: 'more',
      loadMoreText: {
        contentdown: '上拉加载',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据'
      }
    }
  },
  watch: {
    selectedIds: {
      handler(newVal) {
        this.filterSelectedProducts();
      },
      deep: true
    }
  },
  methods: {
    filterSelectedProducts() {
      if (this.products.length > 0 && this.selectedIds.length > 0) {
        this.products = this.products.filter(product =>
            !this.selectedIds.includes(product.productId)
        );
      }
    },
    searchProducts() {
      if (this.loading) return;
      this.loading = true;
      this.queryProduct.productName = this.searchKey;
      this.queryProduct.pageNum = 1;
      this.req({
        url: '/product/list',
        method: 'POST',
        data: this.queryProduct
      }).then(res => {
        console.log(res)
        this.products = res.rows
        this.totalPages = res.total;
        this.loading = false;
        this.loadMoreStatus = this.pageNum >= this.totalPages ? 'nomore' : 'more';
      })
    },
    onInput() {
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.searchProducts();
      }, 300);
    },
    loadMore() {
      if (this.loading || this.pageNum >= this.totalPages) return;
      this.loading = true;
      this.queryProduct.productName = this.searchKey;
      this.queryProduct.pageNum = this.pageNum++;
      this.req({
        url: '/product/list',
        method: 'POST',
        data: this.queryProduct
      }).then(res => {
        this.products = res.rows
        this.totalPages = res.total;
        this.loading = false;
        this.loadMoreStatus = this.pageNum >= this.totalPages ? 'nomore' : 'more';
      })
    },
    selectProduct(product) {
      this.$emit('select', product);
    }
  }
}
</script>

<style>
.product-selector {
  height: 100%;
  background-color: #f8f8f8;
}

.search-area {
  padding: 15rpx;
}

/* 优化后的搜索框样式 */
.custom-search-bar {
  border: 1rpx solid #e8e8e8; /* 浅灰色边框 */
  border-radius: 32rpx; /* 圆角更圆润 */
  background-color: #f9f9f9; /* 轻微灰白色背景 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 柔和阴影 */
  height: 70rpx; /* 增加高度提升点击区域 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  padding: 0 30rpx; /* 内部间距 */
}

.custom-search-bar .uni-search-bar__content {
  background-color: transparent; /* 清除默认背景 */
  border: none; /* 清除默认边框 */
}

.custom-search-bar .uni-search-bar__input {
  height: 50rpx; /* 输入框高度 */
  line-height: 50rpx; /* 行高 */
}

.product-list {
  padding: 0 15rpx;
}

.product-item {
  display: flex;
  padding: 15rpx 0;
  border-bottom: 1rpx solid #eee;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 15rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.product-meta {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 4rpx;
}

.product-price {
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #e54d42;
  font-weight: bold;
}

.empty-list {
  text-align: center;
  padding: 100rpx 0;
  color: #999;
  font-size: 28rpx;
}

.pagination {
  padding: 20rpx 0;
  text-align: center;
}
</style>